<template>
  <div class="home">
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <h2 style="text-align: center;" class="name">昊锐稀土各变压器电力负荷监控</h2>
    <Button/>
    <PowerEcharts :type="type" :msg="msg" :current="current" :value="value" :max="max" />
    <div class="echarts">
      <AvgMonth :type="type" :value="value" :max="max" :current="current" :month="month" :avgData="avgData" msgs="月平均电流及利用率" />
      <AvgMonth :type="type" :value="value" :max="max" :current="current" :month="month" :avgData="maxData" msgs="月最大电流及利用率" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import PowerEcharts from "@/components/PowerEcharts.vue";
import AvgMonth from "@/components/AvgMonth.vue";
import Button from '@/components/Button.vue'
import {getAvgMonth} from '@/api/echartApi'
export default {
  name: "HomeView",
  components: {
    PowerEcharts,
    AvgMonth,Button
  },
  data() {
    return {
      buttonList: [],
      type: "AH1_IPA",
      msg: "总进线",
      timer: null,
      current: "202.1A",
      value: '202.1',
      active: 1,
      max: '202.1',
      avgData: [],
      month: [],
      maxData: [],
      message1: '平均电流与利用率',
      message2: '最大电流与利用率'
    };
  },
  watch: {
    type(newVal,oldVal) {
      console.log(newVal,oldVal)
      this.getAvgMonths(newVal)
    }
  },
  methods: {
    handleClick(item) {
      // console.log(item);
      this.type = item.type;
      this.msg = item.name;
      this.current = item.current;
      this.value = item.value;
      this.active = item.id;
      this.max = item.max
    },
    handleResize() {
      if (window.innerWidth < 768) {
        this.buttonWidth = '100%';
      } else {
        this.buttonWidth = '30vw';
      }
    },
    async getAvgMonths(type) {
      // console.log(this.type)
      const res = await getAvgMonth(type)
      // console.log(res);
      this.avgData = res.data.map(item => (item.avg).toFixed(2))
      this.month = res.data.map(item => item.month)
      this.maxData = res.data.map(item => (item.max).toFixed(2))
      // console.log(this.avgData);

    }
  },
  created() {
    this.buttonList = this.$store.state.btnList
    this.type = this.$route.query.type;
    this.msg = this.$route.query.msg;
    this.current = this.$route.query.current;
    this.value = this.$route.query.value;
    this.max = this.$route.query.max
    console.log(this.type,this.msg,this.current,this.value,this.max)
    this.getAvgMonths(this.type)
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
.home {
  height: 100%;
  box-sizing: border-box;
  transform: translateY(-2%);
}
.echarts {
  //width: 100vw;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
}
@media (max-width: 1200px) {
  .echarts {
    //background-color: pink;
    display: block;
  }
}
</style>
